Borders,Margins and Padding
Borders
The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change −
The border-color specifies the color of a border.
The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
The border-width specifies the width of a border.
Now, we will see how to use these properties with examples.
The border-color Property
The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties −
border-bottom-color changes the color of bottom border.
border-top-color changes the color of top border.
border-left-color changes the color of left border.
border-right-color changes the color of right border.
The following example shows the effect of all these properties −
The border-style Property
The border-style property allows you to select one of the following styles of border −
none − No border. (Equivalent of border-width:0;)
solid − Border is a single solid line.
dotted − Border is a series of dots.
dashed − Border is a series of short lines.
double − Border is two solid lines.
groove − Border looks as though it is carved into the page.
ridge − Border looks the opposite of groove.
inset − Border makes the box look like it is embedded in the page.
outset − Border makes the box look like it is coming out of the canvas.
hidden − Same as none, except in terms of border-conflict resolution for table elements.
You can individually change the style of the bottom, left, top, and right borders of an element using the following properties −
border-bottom-style changes the style of bottom border.
border-top-style changes the style of top border.
border-left-style changes the style of left border.
border-right-style changes the style of right border.
The following example shows all these border styles −
The border-width Property
The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick.
You can individually change the width of the bottom, top, left, and right borders of an element using the following properties −
border-bottom-width changes the width of bottom border.
border-top-width changes the width of top border.
border-left-width changes the width of left border.
border-right-width changes the width of right border
The following example shows all these border width −
Border Properties Using Shorthand
The border property allows you to specify color, style, and width of lines in one property −
The following example shows how to use all the three properties into a single property. This is the most frequently used property to set border around any element.
Margin
The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.
We have the following properties to set an element margin.
The margin specifies a shorthand property for setting the margin properties in one declaration.
The margin-bottom specifies the bottom margin of an element.
The margin-top specifies the top margin of an element.
The margin-left specifies the left margin of an element.
The margin-right specifies the right margin of an element.
The Margin Property
The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph −
Here is an example-
The Margin-bottom Property
The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.
Here is an example-
The Margin-top Property
The margin-top property allows you set top margin of an element. It can have a value in length, % or auto.
Here is an example-
The Margin-left Property
The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.
Here is an example-
The Margin-right Property
The margin-right property allows you set right margin of an element. It can have a value in length, % or auto.
Here is an example-
Padding
The padding property allows you to specify how much space should appear between the content of an element and its border −
The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.
The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −
The padding-bottom specifies the bottom padding of an element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.
The Padding Property
The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.
Here is an example-
The Padding-bottom Property
The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.
Here is an example-
The Padding-top Property
The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.
Here is an example-
The Padding-left Property
The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.
Here is an example-
The Padding-right Property
The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.